<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口自动加解密技术解析</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
        }
        .hero-title {
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .feature-badge {
            background: linear-gradient(to right, #10b981, #34d399);
        }
        table {
            border-collapse: separate;
            border-spacing: 0;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }
        th {
            background-color: #f8fafc;
            font-weight: 600;
        }
        tr:hover td {
            background-color: #f8fafc;
        }
        pre {
            background-color: #1e293b;
            color: #e2e8f0;
            border-radius: 8px;
            overflow-x: auto;
        }
        code {
            font-family: 'Fira Code', monospace;
        }
        .mermaid-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .section-title {
            position: relative;
            padding-left: 20px;
        }
        .section-title:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 5px;
            background: linear-gradient(to bottom, #2563eb, #3b82f6);
            border-radius: 5px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="hero-title text-4xl md:text-5xl font-bold mb-6 leading-tight">
                    金融级API安全防护：<br>接口自动加解密技术解析
                </h1>
                <p class="text-xl mb-8 opacity-90">
                    通过RSA+AES混合加密方案，构建坚不可摧的API安全防线
                </p>
                <div class="flex flex-wrap gap-4">
                    <span class="feature-badge text-white px-4 py-2 rounded-full text-sm font-medium">
                        <i class="fas fa-lock mr-2"></i>传输数据全程加密
                    </span>
                    <span class="bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium">
                        <i class="fas fa-shield-alt mr-2"></i>接口调用合法性验证
                    </span>
                    <span class="bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium">
                        <i class="fas fa-eye-slash mr-2"></i>敏感信息自动脱敏
                    </span>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1741844206522-b3383941-5426-4c85-b3ce-1d15851f94a8.png" 
                     alt="API安全防护" 
                     class="rounded-lg shadow-xl max-w-full h-auto">
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-6xl py-12 px-4">
        <!-- Section 1 -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                为什么需要接口自动加解密？
            </h2>
            <p class="text-lg mb-6 text-gray-700">
                某金融App上线后遭遇以下安全事件，凸显了API安全防护的迫切性：
            </p>
            <div class="grid md:grid-cols-3 gap-6 mb-10">
                <div class="card bg-white p-6 rounded-lg">
                    <div class="text-red-500 text-3xl mb-4">
                        <i class="fas fa-user-secret"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-2 text-gray-800">数据窃取</h3>
                    <p class="text-gray-600">用户交易数据在传输过程中被窃取</p>
                </div>
                <div class="card bg-white p-6 rounded-lg">
                    <div class="text-yellow-500 text-3xl mb-4">
                        <i class="fas fa-bug"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-2 text-gray-800">恶意调用</h3>
                    <p class="text-gray-600">关键API接口被恶意调用</p>
                </div>
                <div class="card bg-white p-6 rounded-lg">
                    <div class="text-blue-500 text-3xl mb-4">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-2 text-gray-800">信息泄露</h3>
                    <p class="text-gray-600">敏感信息在日志中明文泄露</p>
                </div>
            </div>
            <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
                <p class="text-blue-800">
                    <i class="fas fa-lightbulb mr-2"></i>通过RSA+AES混合加密方案，我们实现了传输数据全程加密、接口调用合法性验证和敏感信息自动脱敏的三重防护。
                </p>
            </div>
        </section>

        <!-- Section 2 -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                混合加密技术选型：RSA+AES黄金组合
            </h2>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">2.1 技术组合优势</h3>
            <div class="overflow-x-auto mb-10">
                <table class="w-full bg-white rounded-lg overflow-hidden">
                    <thead>
                        <tr>
                            <th class="py-3 px-4">加密类型</th>
                            <th class="py-3 px-4">特点</th>
                            <th class="py-3 px-4">适用场景</th>
                            <th class="py-3 px-4">性能对比</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="py-3 px-4 font-medium">RSA</td>
                            <td class="py-3 px-4">非对称加密，安全性高</td>
                            <td class="py-3 px-4">密钥交换</td>
                            <td class="py-3 px-4">慢（1KB数据需5ms）</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-4 font-medium">AES</td>
                            <td class="py-3 px-4">对称加密，速度快</td>
                            <td class="py-3 px-4">大数据量加密</td>
                            <td class="py-3 px-4">快（1MB数据需10ms）</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3 class="text-2xl font-semibold mb-6 text-gray-700">2.2 工作流程设计</h3>
            <div class="mermaid-container mb-10">
                <div class="mermaid">
                    sequenceDiagram
                        participant Client
                        participant Server
                        Client->>Server: 发送RSA加密的AES密钥
                        Server->>Server: 使用RSA私钥解密获取AES密钥
                        Client->>Server: 发送AES加密的业务数据
                        Server->>Server: 使用AES密钥解密业务数据
                        Server->>Server: 处理业务逻辑
                        Server->>Client: 返回AES加密的响应数据
                </div>
            </div>
        </section>

        <!-- Section 3 -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                实战案例：支付接口安全改造
            </h2>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">3.1 原始风险接口</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>@PostMapping("/pay")
public Result pay(@RequestBody PaymentRequest request) {
    // 明文传输的支付请求
    paymentService.process(request);
    return Result.success();
}</code></pre>
                <p class="mt-2 text-red-600 text-sm"><i class="fas fa-exclamation-triangle mr-2"></i>风险：明文传输敏感数据，易被窃取</p>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">3.2 改造后安全接口</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>@EncryptResponse
@PostMapping("/secure/pay")
public Result securePay(@DecryptRequest PaymentRequest request) {
    paymentService.process(request);
    return Result.success(); // 返回数据自动加密
}</code></pre>
                <p class="mt-2 text-green-600 text-sm"><i class="fas fa-check-circle mr-2"></i>改进：自动加解密处理，确保数据安全</p>
            </div>
        </section>

        <!-- Section 4 -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                SpringBoot整合实现
            </h2>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">4.1 核心依赖配置</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>&lt;!-- 加密算法支持 --&gt;
&lt;dependency&gt;
    &lt;groupId&gt;org.bouncycastle&lt;/groupId&gt;
    &lt;artifactId&gt;bcprov-jdk15on&lt;/artifactId&gt;
    &lt;version&gt;1.70&lt;/version&gt;
&lt;/dependency&gt;</code></pre>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">4.2 RSA密钥管理</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>@Configuration
public class CryptoConfig {
    
    @Bean("rsaKeyPair")
    public KeyPair rsaKeyPair() throws NoSuchAlgorithmException {
        KeyPairGenerator generator = KeyPairGenerator.getInstance("RSA");
        generator.initialize(2048);
        return generator.generateKeyPair();
    }
}</code></pre>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">4.3 AES密钥管理</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>@Bean("aesKey")
public SecretKey aesKey() {
    KeyGenerator generator = KeyGenerator.getInstance("AES");
    generator.init(256);
    return generator.generateKey();
}</code></pre>
            </div>
        </section>

        <!-- Section 5 -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                自动加解密实现
            </h2>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">5.1 请求解密过滤器</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>public class DecryptFilter extends OncePerRequestFilter {
    
    @Override
    protected void doFilterInternal(HttpServletRequest request, 
                                   HttpServletResponse response, 
                                   FilterChain chain) throws IOException {
        // 读取加密请求体
        String encryptedBody = IOUtils.toString(request.getInputStream());
        
        // RSA解密AES密钥
        String aesKey = RSAUtil.decrypt(encryptedAesKey, privateKey);
        
        // AES解密数据
        String plainText = AESUtil.decrypt(encryptedData, aesKey);
        
        // 包装请求对象
        ContentCachingRequestWrapper wrappedRequest = 
            new ContentCachingRequestWrapper(request);
        wrappedRequest.setBody(plainText.getBytes());
        
        chain.doFilter(wrappedRequest, response);
    }
}</code></pre>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">5.2 响应加密处理</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>@ControllerAdvice
public class EncryptResponseAdvice implements ResponseBodyAdvice&lt;Object&gt; {

    @Override
    public Object beforeBodyWrite(Object body, MethodParameter returnType, 
                                 MediaType mediaType, Class converterType,
                                 ServerHttpRequest request, ServerHttpResponse response) {
        // 获取AES密钥
        String aesKey = KeyHolder.getCurrentKey();
        
        // 加密响应数据
        return AESUtil.encrypt(JsonUtils.toJson(body), aesKey);
    }
}</code></pre>
            </div>
        </section>

        <!-- Section 6 -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                高级功能扩展
            </h2>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">6.1 密钥轮换策略</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>@Scheduled(fixedRate = 24 * 60 * 60 * 1000) // 每天轮换
public void rotateKeys() {
    // 生成新RSA密钥对
    KeyPair newPair = keyGenerator.generateRsaKeyPair();
    // 更新公钥缓存
    publicKeyCache.refresh(newPair.getPublic());
    // 保留旧私钥用于解密历史数据
    privateKeyArchive.save(newPair.getPrivate());
}</code></pre>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">6.2 密文签名验证</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>public boolean verifySignature(String data, String sign) {
    // 使用RSA验证数据签名
    Signature signature = Signature.getInstance("SHA256withRSA");
    signature.initVerify(publicKey);
    signature.update(data.getBytes());
    return signature.verify(Base64.decode(sign));
}</code></pre>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">6.3 请求重放防护</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>public void checkReplayAttack(String timestamp, String nonce) {
    long current = System.currentTimeMillis();
    long requestTime = Long.parseLong(timestamp);
    
    // 时间窗口检查（5分钟内有效）
    if (current - requestTime > 300_000) {
        throw new ApiException("请求已过期");
    }
    
    // 随机数唯一性检查
    if (nonceCache.contains(nonce)) {
        throw new ApiException("请求重复提交");
    }
    nonceCache.add(nonce);
}</code></pre>
            </div>
        </section>

        <!-- Section 7 -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                性能优化实践
            </h2>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">7.1 缓存优化策略</h3>
            <div class="overflow-x-auto mb-10">
                <table class="w-full bg-white rounded-lg overflow-hidden">
                    <thead>
                        <tr>
                            <th class="py-3 px-4">缓存类型</th>
                            <th class="py-3 px-4">缓存内容</th>
                            <th class="py-3 px-4">失效策略</th>
                            <th class="py-3 px-4">命中率提升</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="py-3 px-4 font-medium">公钥缓存</td>
                            <td class="py-3 px-4">RSA公钥</td>
                            <td class="py-3 px-4">定时刷新</td>
                            <td class="py-3 px-4">98%</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-4 font-medium">AES密钥缓存</td>
                            <td class="py-3 px-4">会话密钥</td>
                            <td class="py-3 px-4">LRU淘汰</td>
                            <td class="py-3 px-4">85%</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-4 font-medium">签名验证缓存</td>
                            <td class="py-3 px-4">已验证签名</td>
                            <td class="py-3 px-4">固定有效期</td>
                            <td class="py-3 px-4">70%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">7.2 异步解密处理</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code>@Async("cryptoExecutor")
public CompletableFuture&lt;String&gt; asyncDecrypt(String encryptedData) {
    return CompletableFuture.completedFuture(decrypt(encryptedData));
}</code></pre>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">7.3 硬件加速方案</h3>
            <div class="mb-10">
                <pre class="p-4 rounded-lg"><code># 启用AES-NI指令集
-Djdk.crypto.KeyAgreement.legacyKDF=true</code></pre>
            </div>
        </section>

        <!-- Section 8 -->
        <section class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                安全防护体系
            </h2>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">8.1 分层防御架构</h3>
            <div class="mermaid-container mb-10">
                <div class="mermaid">
                    graph TD
                        A[客户端] -->|HTTPS加密传输| B(API网关)
                        B --> C[请求解密]
                        C --> D[签名验证]
                        D --> E[重放防护]
                        E --> F[业务逻辑]
                        F --> G[响应加密]
                        G --> H[客户端]
                </div>
            </div>
            
            <h3 class="text-2xl font-semibold mb-6 text-gray-700">8.2 关键防护指标</h3>
            <div class="overflow-x-auto">
                <table class="w-full bg-white rounded-lg overflow-hidden">
                    <thead>
                        <tr>
                            <th class="py-3 px-4">安全指标</th>
                            <th class="py-3 px-4">防护措施</th>
                            <th class="py-3 px-4">检测方法</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="py-3 px-4 font-medium">机密性</td>
                            <td class="py-3 px-4">AES-256加密</td>
                            <td class="py-3 px-4">密文熵值分析</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-4 font-medium">完整性</td>
                            <td class="py-3 px-4">RSA签名验证</td>
                            <td class="py-3 px-4">签名校验测试</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-4 font-medium">可用性</td>
                            <td class="py-3 px-4">密钥轮换机制</td>
                            <td class="py-3 px-4">故障演练</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-4 font-medium">不可否认性</td>
                            <td class="py-3 px-4">数字签名存证</td>
                            <td class="py-3 px-4">司法鉴定验证</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold text-white">技术小馆</h3>
                    <p class="text-sm mt-1">专注技术分享与实战经验</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition-colors duration-300">
                        <i class="fas fa-globe mr-2"></i>http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            sequence: {
                diagramMarginX: 50,
                diagramMarginY: 10,
                boxTextMargin: 5,
                noteMargin: 10,
                messageMargin: 35,
                mirrorActors: true
            }
        });
    </script>
</body>
</html>